<template>
  <div class="level-container">
      <div class="header">
        <span class="el-icon-arrow-left" @click="back()">返回</span>
        <div class="level-wrap">
          <span class="level-name">
            <i class="circle">1</i>
            <i class="Class-title">第0关-课堂名字</i>
          </span>
          <span class="level-test-name">
            <i class="circle">2</i>
            <i class="test-title">练习-关卡测试</i>
          </span>
        </div>
        <span class="spend-time">耗时:&nbsp;<i>141min&nbsp;31s</i></span>
      </div>
      <div class="level-content">
          <div class="wrapper">
            <div class="bgc-main">
              <div class="level-main">
                <div v-for="items in lst" :key="items.id" style="position: relative">
<!--                  单选题-->
                  <div class="single-choice"  v-if="items.type === 0" >
                    <div v-show="items.showBox === 1">
                      <i class="bar-1"></i>
                      <div class="content-icon"></div>
                      <div>选择题</div>
                      <div @click="singleChoice(items.id, index)"
                           class="single-choice-content"
                           v-for="(item, index) in items.content"
                           :key="index"
                           :ref="'select'+items.id+index"
                      >{{item}}<i :ref="'cover'+items.id+index"></i></div>

                      <div v-if="answer(items.id) === 0" class="right-answer">答对了</div>
                      <div v-if="answer(items.id) === 1" class="right-answer">答错了，正确答案：{{items.rightAnswer}}</div>
                    </div>
                  </div>
<!--                  纯文本-->
                  <div class="text" v-else-if="items.type === 1" >
                    <div v-show="items.showBox === 1">
                      <i class="bar-2"></i>
                      <div class="content-img">
                        <img src="@/assets/images/avatar.jpg" alt="">
                      </div>
                      <div class="text-content">{{items.content}}</div>
                    </div>
                  </div>
<!--                  图片-->
                  <div class="level-content-img" v-else-if="items.type === 2">
                    <div v-show="items.showBox === 1">
                      <i class="bar-2" ></i>
                      <img :src="items.content" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <div class="next-btn" @mouseup="nextByClick()">
        </div>
          <!--侧边栏 start-->
          <div class="sidebar-right">
            <ol>
              <li>
                <span class="small-chapter-title"><a href="#">变量的使用</a></span>
              </li>
              <li>
                <span class="small-chapter-title"><a href="#">print()函数</a></span>
                <ul>
                  <li>转义用法</li>
                  <li>单引号用法</li>
                  <li>双引号用法</li>
                  <li>三引号用法</li>
                </ul>
              </li>
              <li>
                <span class="small-chapter-title">变量和复制</span>
              </li>
              <li>
                <span class="small-chapter-title"><a href="#">lambda函数</a></span>
              </li>
            </ol>
          </div>
          <!--侧边栏 start-->
      </div>
  </div>
</template>
<script>
import test from '@/api/test';
export default {
  data() {
    return {
      lst: [
        // {id: 1, type: 0, showBox: 1, title: '选择题',rightAnswer: 'A', userAnswer: 'A',content: ['选A dadasd', '选B', '选C', '选D']},
        // {id: 2, type: 1, showBox: 1, title: '文本', content: '恭喜你已经步入了python新世界，让我们使用print()开启对python的第一声问候！print()函数的用法有以下几种：单枪匹马——不带引号、搭配单引号、搭配双引号、搭配三引号，我们逐个见识下吧！'},
        // {id: 3, type: 2, showBox: 1, title: '图片', content: require('@/assets/images/2.jpg')},
        // {id: 4, type: 1, showBox: 1, title: '文本', content: '恭喜你已经步入了python新世界，让我们使用print()开启对python的第一声问候！print()函数的用法有以下几种：单枪匹马——不带引号、搭配单引号、搭配双引号、搭配三引号，我们逐个见识下吧！'},
        // {id: 5, type: 0, showBox: 1, title: '选择题',rightAnswer: 'B', userAnswer: 'C', content: ['选A 1231', '选B', '选C', '选D']},
        // {id: 6, type: 1, showBox: 1, title: '文本', content: '恭喜你已经步入了python新世界，让我们使用print()开启对python的第一声问候！print()函数的用法有以下几种：单枪匹马——不带引号、搭配单引号、搭配双引号、搭配三引号，我们逐个见识下吧！'},
        // {id: 7, type: 0, showBox: 1, title: '选择题',rightAnswer: 'A', userAnswer: 'D', content: ['选A 23424', '选B', '选C', '选D']},
        // {id: 8, type: 2, showBox: 0, title: '图片', content: require('C:\\Users\\hqx\\Pictures\\avatar.jpg')},
        // {id: 9, type: 0, showBox: 0, title: '选择题',rightAnswer: 'B', userAnswer: null, content: ['选A rthr', '选B', '选C', '选D']},
        // {id: 10, type: 1, showBox: 0, title: '文本', content: '恭喜你已经步入了python新世界，让我们使用print()开启对python的第一声问候！print()函数的用法有以下几种：单枪匹马——不带引号、搭配单引号、搭配双引号、搭配三引号，我们逐个见识下吧！'},
        // {id: 11, type: 0, showBox: 0, title: '选择题',rightAnswer: 'A', userAnswer: null, content: ['选A hrtey', '选B', '选C', '选D']},
        // {id: 12, type: 1, showBox: 0, title: '文本', content: '恭喜你已经步入了python新世界，让我们使用print()开启对python的第一声问候！print()函数的用法有以下几种：单枪匹马——不带引号、搭配单引号、搭配双引号、搭配三引号，我们逐个见识下吧！'},
      ],
    };
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  mounted() {
    // 调用回车函数
    this.nextByEnter();
  },
  created() {
    test.getData()
        .then(res => {
          // 测试数据
          console.log('我的数据');
          console.log(res);
          this.lst = res.data;
        })
  },
  watch: {
    // 响应数据的变化
    lst: function (){
      // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
      this.$nextTick(() => {
        // 显示用户已经做过的选择题的结果
        this.load();
        // 滑块滑动到最底部
        this.glide();
      })
    }
  },
  methods: {
    // 返回上一个页面
    back(){
      this.$router.push('/course');
    },
    // 滚轮下滑到底
    glide(){
      // 显示出新数据后滑块下滑到最底部
      let div = document.querySelector('.wrapper');
      // 此时必须异步执行滚动条滑动至底部(由于vue采用虚拟dom，每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值，
      // 所以造成每次都是最新的那条消息被隐藏掉了)
      setTimeout(()=>{
        div.scrollTop = div.scrollHeight;
      },0);
    },
    //1、 显示新数据的方法(回车触发)
    nextByEnter(){
      // 箭头函数里面的this指向vue
      document.addEventListener('keyup' , (e)=>{
        if (e.key === 'Enter'){
          this.next();
        }
      });
    },
    //2、 显示新数据的方法(点击触发)
    nextByClick(){
      this.next();
    },
    //3、 显示新数据的方法
    next(){
      for (let i = 0; i < this.lst.length; i++){
        // 单选题未作答，回车或点击都不显示后面的数据
        if (i !== 0 && this.lst[i-1].type === 0 && this.lst[i-1].userAnswer === null) {
          this.$message({
            showClose: true,
            message: '请先完成当前题目',
            center: true,
            type: 'warning'
          });
          return false;
        }
        if (this.lst[i].showBox === 0){
          this.lst[i].showBox = 1;
          // 滚轮下滑到底
          this.glide();
          // 将showBox = true的对象返回到后台
          this.test(this.lst[i]);
          break;
        }
      }
    },
    //4、 提交已经显示过的数据
    test(data){
      console.log(data);
    },
    //5、 获取当前题型的对象
    getCurrentTopic(id){
      let currentTopic = null;
      for (let i = 0; i < this.lst.length; i++) {
        if (this.lst[i].id === id){
          currentTopic = this.lst[i];
          break;
        }
      }
      return currentTopic;
    },
    //6、 单选题选择答案
    singleChoice(id, index) {
      console.log('当前题型id：' + id);
      let currentTopic = this.getCurrentTopic(id);
      console.log('用户所选答案' + currentTopic.userAnswer);
      // 获取当前选择题的元素对象
      let selects = this.$refs[`select${id}${index}`];
      console.log('选项索引：' + index)
     if (currentTopic.userAnswer === null) {
       // 为选中的答案更换样式
       if (index === 0 && currentTopic.rightAnswer === 'A') {
         selects[0].querySelector('i').className = 'coverGreen';
       } else if (index === 1 && currentTopic.rightAnswer === 'B') {
         selects[0].querySelector('i').className = 'coverGreen';
       } else if (index === 2 && currentTopic.rightAnswer === 'C') {
         selects[0].querySelector('i').className = 'coverGreen';
       } else if (index === 3 && currentTopic.rightAnswer === 'D') {
         selects[0].querySelector('i').className = 'coverGreen';
       } else {
         selects[0].querySelector('i').className = 'coverRed';
       }
       // 记录当前题目选择的答案
       switch (index) {
         case 0:
           currentTopic.userAnswer = 'A';
           break;
         case 1:
           currentTopic.userAnswer = 'B';
           break;
         case 2:
           currentTopic.userAnswer = 'C';
           break;
         case 3:
           currentTopic.userAnswer = 'D';
           break;
       }
       // 滚轮下滑到底（异步执行）
       this.glide();
     }
      console.log('用户所选答案' + currentTopic.userAnswer);

    },
    //6、 显示单选答案
    answer(id){
        let currentTopic = this.getCurrentTopic(id); // 获取当前题型对象
        if (currentTopic.userAnswer){ // 判断用户是否作答
          return currentTopic.rightAnswer === currentTopic.userAnswer ? 0 : 1;
        }
        return -1;
    },
    //7、 加载已经做过的单选题
    load(){
      for (let i = 0; i < this.lst.length; i++) {
        if (this.lst[i].type === 0 && this.lst[i].userAnswer !== null){
          let id = this.lst[i].id;
          let userAnswer = this.lst[i].userAnswer;
          let rightAnswer = this.lst[i].rightAnswer;
          let flag = userAnswer === rightAnswer;
          switch (userAnswer) {
            case 'A':
              userAnswer = 0;
              break;
            case 'B':
              userAnswer = 1;
              break;
            case 'C':
              userAnswer = 2;
              break;
            case 'D':
              userAnswer = 3;
              break;
          }
          let cover = this.$refs[`cover${id}${userAnswer}`];
          if (flag){
            cover[0].className = 'coverGreen';
          }else {
            cover[0].className = 'coverRed';
          }
        }
        // 遇到还未显示过的内容，就停止循环,结束用户选择结果的样式更改
        if (this.lst[i].showBox === 0){
          return false;
        }
      }
    },
  },

};
</script>
<style src="@/assets/css/levelDetail.css"  scoped></style>
<style scoped>
@import  "@/assets/css/base.css";
</style>
